<template>
  <div class="node-dialog">
    <a-drawer
      title="添加节点"
      :width="435"
      :visible="nodeVisible"
      :body-style="{ paddingBottom: '80px' }"
      @close="onClose"
    >
      <a-form class="pro-form" :form="form" layout="vertical">
        <a-row>
          <a-col :span="24">
            <a-form-item label="节点名称" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
              <a-input
                placeholder="请输入节点名称"
                v-decorator="['name', { rules: [{ required: true, message: '请输入节点名称' }] } ]"
              />
            </a-form-item>
          </a-col>

          <a-col :span="24">
            <a-form-item label="节点备注">
              <a-textarea
                placeholder="请输入节点备注"
                v-decorator="['remark']"
                :auto-size="{ minRows: 4, maxRows: 10 }"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>

      <div
        :style="{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
          zIndex: 1,
        }"
      >
        <a-button :style="{ marginRight: '8px' }" @click="onClose">
          取消
        </a-button>
        <a-button type="primary" @click="handleSubmit">
          确认
        </a-button>
      </div>
    </a-drawer>
  </div>
</template>
<script>
export default {
  name: 'NodeDialog',
  props:{
    visible: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      form: this.$form.createForm(this),
      nodeVisible: this.visible,
      record: {}, // 当前记录
      type: null, //操作类型
    };
  },
  watch: {
    type(val) {
      if (val === 'edit') {
        this.getDetail()
      }
    }
  },
  methods: {
    /**
     * @func getDetail
     * @description 详情
     */
    getDetail () {
      this.loading = true
      const { form: { setFieldsValue } } = this
      this.$nextTick(() => {
        setFieldsValue({
          name: this.record.properties.name,
          remark: this.record.properties.remark,
        })
      })
    },

    /**
     * @func showDrawer
     * @description 打开面板
     */
    showDrawer() {
      this.nodeVisible = true;
    },

    /**
     * @func onClose
     * @description 关闭方法
     */
    onClose() {
      this.nodeVisible = false;
      this.$emit('close', this.record, this.type)
    },

    /**
     * 确认按钮
     */
    handleSubmit (e) {
      e.preventDefault()
      // 表单验证
      const {
        form: { validateFields }
      } = this
      validateFields((errors, values) => {
        // 提交到后端api
        !errors && this.onFormSubmit(values)
      })
    },

    /**
     * 提交到后端api
     */
    onFormSubmit (values) {
      this.loading = true
      this.record.properties.name = values.name
      this.record.properties.remark = values.remark
      this.record.properties.type = values.add
      this.$emit('submit', this.record)
      // 关闭对话框事件
      this.handleCancel()
    },

    /**
     * 关闭对话框事件
     */
    handleCancel () {
      this.isVisible = false
      this.form.resetFields()
    },

    /**
     * @func setRecord
     * @description 当前记录
     */
    setRecord(record, type) {
      this.record = record
      if (type) {
        this.type = type
      }
    }
  },
};
</script>
